<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>12_offset和position</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }
    
    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 10px;
        background: blue;
    }
    
    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: red;
    }
    
    .div3 {
        position: absolute;
        top: 250px;
    }
</style>

<body style="height: 2000px;">

    <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class='div3'>
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>

    <!--
获取/设置标签的位置数据
  * offset(): 相对页面左上角的坐标
  * position(): 相对于父元素左上角的坐标
-->
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //   需求:
        //   1. 点击 btn1
        //     打印 div1 相对于页面左上角的位置
        //     打印 div2 相对于页面左上角的位置
        //     打印 div1 相对于父元素左上角的位置
        //     打印 div2 相对于父元素左上角的位置
        //   2. 点击 btn2
        //     设置 div2 相对于页面的左上角的位置
    </script>
</body>

</html>